var path = "../";
var pageListUrl = "../online/offLine/detail"
var lineList = [];
var barList = [];
var date = [];
var btnType = "1";
var myChart = echarts.init(document.getElementById('gaikuangDiv'));
//异步加载数据

myChart.showLoading();
$.ajax({
    type: "post",
    async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url: path + "online/num",    //请求发送到getTig处
    data: {type: 1},
    dataType: "json",        //返回数据形式为json
    success: function (result) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result.lineList.length != undefined) {
            for (var i = 0; i < result.lineList.length; i++) {
                lineList.push(result.lineList[i].tigLineNum);
            }
            for (var i = 0; i < result.lineList.length; i++) {
                if (result.lineList[i].tigHour != undefined) {
                    date.push(result.lineList[i].tigHour);
                }
            }
            document.getElementById("oneMonth").style.display = "none";
            document.getElementById("oneWeek").style.display = "none";
            document.getElementById("today").style.display = "";
            myChart.hideLoading();
            var option = setOptionParam(result);
            myChart.setOption(option);
            $(window).resize(function () {
                myChart.resize();
            });
            window.onresize = myChart.resize();
        } else {
            myChart.clear();
            option.series[0].data = "暂无数据"
            myChart.setOption(option);
        }
    },
    error: function (errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
    }
});

function onlineNumber(type) {
    $.ajax({
        type: "post",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: path + "online/num",    //请求发送到getTig处
        data: {type: type},
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result.lineList.length != undefined) {
                lineList = [];
                date = [];
                for (var i = 0; i < result.lineList.length; i++) {
                    if (result.lineList[i].tigLineNum != undefined) {
                        lineList.push(result.lineList[i].tigLineNum);
                    }
                }
                for (var i = 0; i < result.lineList.length; i++) {
                    if (result.lineList[i].tigHour != undefined) {
                        date.push(result.lineList[i].tigHour);
                    }
                }
                btnType = type;
                if(type == 1){
                    document.getElementById("today").style.display = "";
                    document.getElementById("oneMonth").style.display = "none";
                    document.getElementById("oneWeek").style.display = "none";
                    dataList.getList("today");
                }else if(type == 2) {
                    document.getElementById("today").style.display = "none";
                    document.getElementById("oneMonth").style.display = "none";
                    document.getElementById("oneWeek").style.display = "";
                    dataList.getList("week");
                }else if(type == 3) {
                    document.getElementById("today").style.display = "none";
                    document.getElementById("oneMonth").style.display = "";
                    document.getElementById("oneWeek").style.display = "none";
                    dataList.getList("month");
                }
                var option = setOptionParam(result);
                myChart.clear();
                myChart.setOption(option);
                $(window).resize(function () {
                    myChart.resize();
                });
                window.onresize = myChart.resize();
            } else {
                myChart.clear();
                option.series[0].data = "暂无数据"
                myChart.setOption(option);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
}

var dataList = new Vue({
    el: "#equipmentOnlineTimeList",
    data: {
        days: {},
        pageInfo: {},
        backPercent: "",
        //TODO 自定义条件查询---begin--------
        condition: {
            page: 1,
            rows: customUtils.pageSize,
            id: "",
            equipmentCode: "",
            sumOffLine: "",
            onlineTime: "",
            address: "",
            contact: "",
            shopName: "",
            sumOffLine: "",
            onlineStatus: "",
            telephoningCondition: "",
            contactInstructorCondition: "",
            interviewCondition: "",
            dateTime: "",
            number: "",
            failNum: "",
            successNum: "",
            phoneCommunicationRecord: "",
            instructorCommunicationRecord: "",
            visitRecord: "",
            errorReason: "",
            errorPhenomenon: "",
            processingMethod: "",
            processingResult: "",
            score0: 0,
            score1: 0,
            score2: 0,
            score3: 0,
            score4: 0,
            score5: 0,
            score6: 0
        },
        selectedPageSize: customUtils.pageSize//修改页面数据显示条数
    },
    mounted: function () {
        //初始化页面数据
        this.getList('init');
    },
    // 在 `methods` 对象中定义方法,如果操作中函数的逻辑比较复杂，必须封装到dictType对象
    methods: {
        changeTime: function (elem) {
            dataList.$data.condition[elem.split('-')[0]] = $("#" + elem).val();
            console.log(dataList.$data.condition);
        },
        //搜索、分页列表
        getList: function (eventSrc) {
            var self = this;
            //改变页面显示条数
            if (eventSrc == "changePageSize") {
                if (this.pageInfo.pageSize != this.selectedPageSize) {
                    this.pageInfo.pageSize = this.selectedPageSize;
                    $('#pagination').jqPaginator('destroy');
                    eventSrc = 'init';//重新绘制控件
                } else {
                    return;
                }
            }
            //初始化时无当前页数，后台有默认第1页，每页10条
            if (this.pageInfo != undefined && this.pageInfo.pageNum != undefined) {
                self.condition["page"] = this.pageInfo.pageNum;
                self.condition["rows"] = this.pageInfo.pageSize;
            }
            var param = {};
            param["page"] = self.condition["page"];
            param["rows"] = self.condition["rows"];
            param["btnType"] = btnType;
            this.condition.items = [];
            customUtils.post(self, pageListUrl, param, function (response, isSuccess) {
                if (isSuccess == false) {
                    dataList.pageInfo.pages = 0;
                    return;
                }
                dataList.pageInfo = response.body.pagination;
                dataList.days = response.body.days;
                //页面初始化、搜索时，才需要执行分页控件
                if (eventSrc == 'init' || eventSrc == 'search'||eventSrc == 'month'||eventSrc == 'week') {
                    customUtils.paging('#pagination', dataList.pageInfo.pages, customUtils.showPage, function (num) {
                        //当前页码pageNum与将要翻页的页码num不相等才执行，否则为同一页
                        if (dataList.pageInfo.pageNum != num) {
                            dataList.pageInfo.pageNum = num;
                            dataList.getList('paging');
                        }
                    });
                }
            }, function (response) {
                dataList.pageInfo.pages = 0;
            });
        },
    }
});

function setOptionParam(result) {
    if (result.lineList.length != undefined) {
        var option = {
            title: {
                left: '10%',
                textStyle: {
                    fontSize: 14,
                    color: '#333'          // 主标题文字颜色
                },
                text: '实时在线率:' + result.onlinePercent + '%'
            },
            tooltip: {},
            legend: {
                data: ['实时在线率']
            },
            xAxis: {
                data: date
            },
            dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }],
            yAxis: [
                {
                    axisLabel: {
                        formatter: '{value}%'
                    }
                }
            ],
            graphic: [
                {
                    type: 'group',
                    right: '200px',
                    top: 1,
                    children: [
                        {
                            type: 'text',
                            z: 100,
                            left: 'center',
                            top: 'middle',
                            style: {
                                fill: '#333',
                                text: [
                                    '实时情况:',
                                    '总台数:' + result.total + '台',
                                    '在线:' + result.onlineNumber + '台',
                                    '离线:' + result.offLineNumber + '台'
                                ].join('\n'),
                                font: '14px Microsoft YaHei'
                            }
                        }
                    ]
                },
                {
                    type: 'group',
                    right: '200px',
                    top: 1,
                    children: [
                        {
                            type: 'text',
                            z: 100,
                            left: 'center',
                            top: 'middle',
                            style: {
                                fill: '#333',
                                text: [
                                    '平均情况:',
                                    '平均在线率: ' + result.avgPercent,
                                    '最高在线率: ' + result.maxPercent,
                                    '最低在线率: ' + result.minPercent
                                ].join('\n'),
                                font: '14px Microsoft YaHei'
                            }
                        }
                    ]
                }
            ],
            toolbox: {
                show: true,
                orient: 'horizontal',
                showTitle: true,
                feature: {
                    magicType: {
                        type: ['line']
                    },
                    saveAsImage: {
                        type: 'png',
                        show: true,
                        title: '保存为图片',
                    },
                    restore: {show: true}
                }
            },
            series: [
                {
                    name: '实时在线率',
                    type: 'line',
                    data: lineList
                }
            ]
        };
        if (result.type == 1) {
            option.graphic = option.graphic[0];
        } else {
            option.graphic = option.graphic[1];
        }

        return option;
    } else {
        myChart.clear();
        option.series[0].data = "暂无数据"
        myChart.setOption(option);
    }
};
